<template>
    <div class="goods">
        <div class="menu-wrapper" ref="menuWrapper" >
            <ul >
                <li v-for="(item,key) in goods" :key="key" 
                class="menu-item" :class="{'current':currentIndex===key}"
                @click="selectMenu(key)"> 
                    <span class="text border-1px">
                        <span v-show="item.type>0" class="icon" :class="classMap[item.type]"></span>{{item.name}}
                    </span>
                </li>
            </ul>
        </div>
        <div class="foods-wrapper" ref="foodWrapper">
            <ul>
                <li v-for="(item,key) in goods" :key="key" 
                class="food-list food-list-hook" 
                >
                    <h1 class="title">{{item.name}}</h1>
                    <ul>
                        <li v-for="(food,i) in item.foods" :key="i" 
                        class="food-item"   @click="selectFood(food,$event)">
                            <div class="icon">
                                <img :src="food.icon" width="57" alt="">
                            </div>
                            <div class="content">
                                <div class="name">{{food.name}}</div>
                                <div class="desc">{{food.description}}</div>
                                <div class="extra">
                                    <span class="count">月售{{food.sellCount}}份</span>
                                    <span>好评率{{food.rating}}%</span>
                                </div>
                                <div class="price">
                                    <span class="now">￥{{food.price}}</span>
                                    <del class="old" v-show="food.oldPrice">￥{{food.oldPrice}}</del>
                                </div>
                                <div class="cartcontrol-wrapper">
                                    <cartcontrol :food="food" class="item" ></cartcontrol>
                                </div>
                            </div>
                            
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <shopcart :selectFoods="selectFoods" 
        :deliveryPrice="seller.deliveryPrice" 
        :minPrice="seller.minPrice"
        ref="shopcart"
        ></shopcart>
        <food :food="selectedFood" ref="foodC"></food>
    </div>
</template>
<script>
import BScroll from 'better-scroll'
import shopcart from '../shopcart/shopcart'
import cartcontrol from '../cartcontrol/cartcontrol'
import food from '../food/food'
export default {
    props :['seller'],
    data() {
        return {
            goods: [],
            listHeights: [],
            scrollY: 0,
            ballFlag: false,
            selectedFood : {}
        }
    },
    components :{
        food,
        shopcart,
        cartcontrol
    },
    computed: {
        currentIndex(){
            for(let i=0;i<this.listHeights.length;i++){
                let height1 = this.listHeights[i]
                let height2 = this.listHeights[i+1]
                if(!height2 || (this.scrollY>=height1&&this.scrollY<height2)){
                    return i
                }
            }
            return 0
        },
        selectFoods(){
            let foods = []
            this.goods.forEach((good)=>{
                good.foods.forEach((food)=>{
                    if(food.count){
                        foods.push(food)
                    }
                })
            })
            return foods
        }
    },
    methods: {
        getData(){
            this.$axios.get('static/data.json').then((res)=>{
                this.goods = res.data.goods
                this.$nextTick(()=>{
                    this._initScroll()
                    this._calculateHeight()
               })
            })
        },
        selectMenu(i){
            let foodList = this.$refs.foodWrapper.getElementsByClassName('food-list-hook');
            let el = foodList[i]
            this.foodScroll.scrollToElement(el,500)
            
        },
        _initScroll() {
            this.foodScroll = new BScroll(this.$refs.foodWrapper,{
                probeType: 3,
                click: true
            })
            this.menuScroll = new BScroll(this.$refs.menuWrapper,{
                click: true
            })
            this.foodScroll.on('scroll',(pos)=>{
                this.scrollY = Math.abs(Math.round(pos.y))
            })
            
        },
        _calculateHeight(){
            let foodList = this.$refs.foodWrapper.getElementsByClassName('food-list-hook');
            for(let i=0;i<foodList.length;i++){
                this.listHeights.push(foodList[i].offsetTop)
            }
        },
        selectFood(food,event){
            this.selectedFood = food
            this.$refs.foodC.show()
        }
    },
    mounted(){
        this.getData()
        this.classMap = ['decrease','discount','special','invoice','guarantee']
    }

}
</script>
<style lang="stylus">
@import '../../common/stylus/mixin.styl'
.goods
    position absolute
    width 100%
    top 174px
    bottom 46px
    display flex
    overflow hidden
    .menu-wrapper
        flex-basis 80px 
        width 80px
        background #f3f5f7
        .menu-item
            display table
            width 56px
            height 54px
            line-height 14px
            padding  0 12px
            &.current
                background #fff
                margin-top -1px
                z-index 10
                font-weight 700
                .text
                    border-bottom none 
            .icon
                vertical-align top
                display inline-block
                width 12px
                height 12px
                margin-right 2px
                background-size 12px 12px
                background-repeat no-repeat
                &.decrease
                    bg-img('decrease_3')
                &.discount
                    bg-img('discount_3')
                &.guarantee
                    bg-img('guarantee_3')
                &.invoice
                    bg-img('invoice_3')
                &.special
                    bg-img('special_3')    
            .text
                font-size 12px
                color rgb(24,20,20)
                display table-cell
                vertical-align middle
                border-bottom 1px solid rgba(7,17,27,0.1)

    .foods-wrapper
        flex 1
        .food-list
            .title
                font-size 12px
                color rgb(147,153,159)
                height 26px
                line-height 26px
                background #f3f5f7
                border-left 2px solid #d9dde1
                padding-left 14px
            .food-item
                display flex
                margin 18px
                border-bottom 1px solid rgba(7,17,27,0.1)
                padding-bottom 18px
                &:last-child
                    border none 
                    margin-bottom 0
                .icon
                    flex-basis 57px
                    margin-right 10px
                .content
                    flex 1
                    position relative
                    .name
                        font-size 14px
                        color rgb(7,17,27)
                        line-height 14px
                        margin 2px 0 8px 0
                        height 14px
                    .desc,.extra
                        font-size 10px
                        color rgb(147,153,159)
                        line-height 10px
                    .desc
                        margin 0 0 8px 0
                        line-height 12px
                    .extra
                        .count
                            margin-right 12px
                    .price
                        font-weight 700
                        line-height 24px
                        .now
                            font-size 14px
                            color rgb(240,20,20)
                        .old
                            font-size 10px
                            color rgb(147,153,159)
                    .cartcontrol-wrapper
                        position absolute
                        right 0
                        bottom 12px
    
                   
</style>
